<!-- 个人信息 -->
<template>
  <div class="frame"
       v-loading="loading">
    <!-- 信息修改弹窗 -->
    <el-dialog v-model="adminInfoShow"
               title="个人信息"
               width="400px"
               center="true"
               @close="closeAdminInfoShow">
      <div style="margin-bottom: 10px;"><span style="width: 80px;display: inline-block; ">ID</span>
        <el-input style="width: 260px;"
                  v-model="adminInfo.id.value"></el-input>
      </div>
      <div style="margin-bottom: 10px;"><span style="width: 80px;display: inline-block; ">姓名</span>
        <el-input maxLength="10"
                  style="width: 260px;"
                  v-model="adminInfo.userName.value"
                  :disabled="adminInfo.userName.disabled"></el-input>
      </div>
      <div style="margin-bottom: 10px;"><span style="width: 80px;display: inline-block; ">性别</span>
        <el-select v-model="adminInfo.sex.value"
                   style="width: 260px;"
                   placeholder=" "
                   :disabled="adminInfo.sex.disabled">
          <el-option v-for="item in ['男', '女']"
                     :key="item"
                     :label="item"
                     :value="item" />
        </el-select>
      </div>
      <div style="margin-bottom: 10px;"><span style="width: 80px;display: inline-block; ">电话</span>
        <el-input maxLength="11"
                  style="width: 260px;"
                  v-model="adminInfo.userPhone.value"
                  :disabled="adminInfo.userPhone.disabled"></el-input>
      </div>
      <div style="margin-bottom: 10px;"><span style="width: 80px;display: inline-block; ">密码</span>
        <el-input maxLength="20"
                  type="password"
                  style="width: 260px;"
                  v-model="adminInfo.userPassword.value"
                  :disabled="adminInfo.userPassword.disabled"></el-input>
      </div>

      <el-button style="width: 100%;margin-top: 15px;"
                 type="primary"
                 @click="update"
                 :loading="adminInfo.button.disabled">{{
          adminInfo.button.value }}</el-button>
    </el-dialog>

    <!-- @mousewheel.prevent -->
    <!-- 头部区域 -->
    <div class="frame-header">
      <div class="car_logo">
        <img src="../assets/logo.png"
             alt="">
      </div>
      <div class="admin-name">
        <el-dropdown class="pointer"
                     style="color: #79bbff;font-size: 16px;">
          <span style="display: flex;justify-content: center;align-items: center;">
            <!-- 默认头像 -->
            <el-avatar src="https://pic2.zhimg.com/v2-fa322095aa6b0323263397b2d954d0a5_r.jpg" />
            <div style="margin-left: 3px;margin-right: 6px;">{{ admin.userName }}({{ admin.userId }})</div>
            <el-icon>
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="lookInfo">个人信息</el-dropdown-item>
              <el-dropdown-item @click="toMe">我的订单</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>

            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

  </div>
</template>
<script>
import { ElLoading, ElMessage } from 'element-plus'
export default {
  data() {
    return {
      admin: {},
      loading: false,
      adminInfoShow: false,
      adminInfo: {},
    }
  },
  created() {
    let username = this.$store.state.user.username

    // 根据用户获取信息
    this.$http({
      url: '/getOneUser',
      method: 'GET',
      params: {
        username: username,
      },
    }).then((success) => {
      console.log(success.data)
      this.admin = success.data
    })
  },
  methods: {
    // 退出登录
    logout() {
      //从缓存用删除user
      window.localStorage.removeItem('user')
      console.log(this.$store.state.user)
      this.$router.replace({
        path: '/login',
      })
    },

    // 跳转至订单页
    toMe() {
      this.$router.replace({
        path: '/orders',
      })
    },
    closeAdminInfoShow() {
      this.adminInfo = {}
    },

    // 信息校验
    lookInfo() {
      let sex = this.admin.userSex == 1 ? '男' : '女'
      this.adminInfo.id = { value: this.admin.userId, disabled: true }
      this.adminInfo.userName = { value: this.admin.userName, disabled: false }
      this.adminInfo.sex = { value: sex, disabled: false }
      this.adminInfo.userPhone = {
        value: this.admin.userPhone,
        disabled: false,
      }
      this.adminInfo.userPassword = { value: '', disabled: false }
      this.adminInfo.button = { value: '修改用户', disabled: false }
      this.adminInfoShow = true
    },

    // 更新信息
    update() {
      if (
        this.adminInfo.name.value.length == 0 ||
        this.adminInfo.sex.value.length == 0 ||
        this.adminInfo.phone.value == 0
      ) {
        ElMessage({
          message: '信息填写不合法',
          type: 'error',
          duration: 2000,
        })
        return
      }
      this.adminInfo.button.disabled = true
    },
  },
  setup(props, context) {
    const fn = () => {
      context.emit('userInfo', this.admin)
    }
    return { fn }
  },
}
</script>

<style scoped>
.frame {
  white-space: nowrap;
}

.pointer:hover {
  cursor: pointer;
}

.frame-header {
  height: 120px;
  line-height: 80px;
  background-color: white;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}
.car_logo {
  width: 50px;
}
.admin-name {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: right;
  margin-right: 30px;
}

.title {
  margin-left: 35px;
  font-size: 24px;
}

.frame-body {
  width: 100%;
  height: 100%;
  display: flex;
}

.left_body {
  width: 200px;
  min-height: calc(100vh - 82px);
  margin-right: 2px;
  background-color: white;
}

.right_body {
  width: calc(100% - 202px);
  background-color: white;
  padding: 20px;
}
</style>
